<template>
<div id="navigation">
  <div class="container" :class="[isShowService ? 'bottom0' : '']">
    <div :class="['top', isShowMenu ? 'border-bottom': '']">
      <img @click="toPage('/')" src="../../assets/images/home/logo.png" />
      <img @click="showMenu" src="../../assets/images/home/nav.png" />
    </div>
    <div class="menu" v-if="isShowMenu">
      <div class="first" @click="toPage('/')">首页</div>
      <div>
        <div class="first"><span @click="toPage('/service')">服务项目</span><img @click="showService" :class="isShowService ? '' : 'tran'" src="../../assets/images/home/bottom.png"></div>
        <div class="second" v-if="isShowService">
          <p @click="toPage('/service/top')">TOP30名校合作录取</p>
          <p @click="toPage('/service/leader_plan')">常青藤领袖计划</p>
          <p @click="toPage('/service/highSchool')">美国高中</p>
          <p @click="toPage('/service/undergraduate')">美国本科</p>
          <p @click="toPage('/service/master')">美国硕博</p>
          <p @click="toPage('/service/art')">艺术留学</p>
        </div>
      </div>
      <div class="first" @click="toPage('/team')">招生官团队</div>
      <!-- <div class="first" @click="location('http://www.keywinus.com/emergency')">留学紧急应对</div> -->
      <div class="first" @click="toPage('/background_ascension')">背景提升</div>
      <div class="first" @click="toPage('/success_case')">成功案例</div>
      <div class="first" @click="toPage('/history')">青胜历史</div>
      <div class="first" @click="toPage('/news')">青胜资讯</div>
      <div class="first" @click="toPage('/contact')">联系我们</div>
      <div class="bottom"></div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      isShowMenu: false,
      isShowService: false
    }
  },
  methods: {
    toPage(path) {
      this.$router.push(path)
    },
    location(url) {
      window.location = url
    },
    showMenu() {
      this.isShowMenu = !this.isShowMenu
    },
    showService() {
      this.isShowService = !this.isShowService
    }
  }
}
</script>
<style lang="less" rel="stylesheet/less">
@import "index.less";
</style>
